<template>
	<view class="page-box">
		<uni-section title="基本资料" type="line"></uni-section>
		<view class="form-box">
			<view>
				<view>真实姓名</view>
				<input type="text" placeholder="输入真实姓名" placeholder-class="placeholder" v-model="userInfo.userName">
			</view>
			<view>
				<view>手机号码</view>
				<input type="text" placeholder="输入手机号码" placeholder-class="placeholder" v-model="userInfo.phone">
			</view>
			<view>
				<view>身份证号</view>
				<input type="text" placeholder="输入身份证号" placeholder-class="placeholder" v-model="userInfo.idCardNo">
			</view>
			<view>
				<view>所在区域</view>
				<pickerAddress @change="change" @transferLocation="getLocation" :class="{'active':isActive, 'picker':true}">{{txt}}</pickerAddress>								
			</view>
			<view>
				<view>详细地址</view>
				<input type="text" placeholder="输入详细地址" placeholder-class="placeholder" v-model="userInfo.address">
			</view>
		</view>
		<uni-section title="上传证件" type="line"></uni-section>		
		<view class="img-box">
			<view>
				<text>身份证正面</text>
				<view class="uni-uploader">
					<view class="uni-uploader-body">
						<view class="uni-uploader__files">
							<block>
								<view class="uni-uploader__file">
									<image class="close-box" src="../../static/icon_close.png" mode="aspectFit" @click="cancelImage(0)"></image>
									<image class="uni-uploader__img" mode="aspectFill" :src="front_img_url" :data-src="front_img_url" @tap="previewImage"></image>
								</view>
							</block>
							<view class="uni-uploader__input-box">
								<view class="uni-uploader__input" @tap="chooseImage(0)"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<text>身份证反面</text>
				<view class="uni-uploader">
					<view class="uni-uploader-body">
						<view class="uni-uploader__files">
							<block>
								<view class="uni-uploader__file">
									<image class="close-box" src="../../static/icon_close.png" mode="aspectFit" @click="cancelImage(1)"></image>
									<image class="uni-uploader__img" mode="aspectFill" :src="back_img_url" :data-src="back_img_url" @tap="previewImage"></image>
								</view>
							</block>
							<view class="uni-uploader__input-box">
								<view class="uni-uploader__input" @tap="chooseImage(1)"></view>
							</view>
						</view>
					</view>
				</view>
			</view>			
		</view>
		<view class="big-btn" @click="_turnPage('authentication/certificate')">下一步</view>
	</view>
</template>

<script>
	import store from '@/store/store.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
    import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		components: {
			uniSection,
			pickerAddress
		},
		data() {
			return {
				txt: '选择地址',
				isActive: false,
				imageList: ['', ''],
				front_img_url: '',
				back_img_url: '',
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				userInfo:{
					openId: getApp().globalData.open_id,
					authStatus: 0,
					userName: '',
					phone: "",
					idCardNo: "",
					invitationCode: "",					
					idCardFrontImgUrl: "",
					idCardBackImgUrl: '',
					location: '',
					address: '',
					company: ''			
				}
			}
		},
		methods: {	
			_turnPage(url){
				let flag = false
				for(let k in this.userInfo){
					console.log(k)
					if(k != 'company' && k != 'invitationCode'){
						if(this.userInfo[k] === ''){
							flag = true
							break
						}
					}					
				}
				console.log(this.userInfo)
				if(flag == true){
					uni.showModal({
						content: "请填写完整",
						success: (e) => {
							if (e.confirm) {																		
							} else {
							}
						},
						fail: () => {
						}
					})							
				}else{
					uni.navigateTo({
						url: '/pages/' + url + '?param=' + encodeURIComponent(JSON.stringify(this.userInfo))
					})				
				}										
					
			},
			cancelImage(index){
				let _this = this
				uni.showModal({
					content: "是否删除该图片？",
					success: (e) => {
						if (e.confirm) {							
							if(index == 0){
								_this.front_img_url = ''
							}else{
								_this.back_img_url = ''
							}						
						} else {
						}
					},
					fail: () => {
					}
				})			
			},
			chooseImage: async function(index) {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif
				
				// 最多只能有9张图片
				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				let _this = this
				
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {						
						_this.uploadFile(res.tempFilePaths, index)
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
						'android.permission.READ_EXTERNAL_STORAGE');
			
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			uploadFile(tempFilePaths, index){
				let _this = this
				// 单张上传				
				uni.uploadFile({
					url: store.url + '/image/upload', //仅为示例，非真实的接口地址					
					filePath: tempFilePaths[0],
					name: 'Image',
					formData: {
						//'user': 'test'
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data)
						if(data.message == '上传成功'){				
							if(index == 0){
								_this.front_img_url = store.url + '/uploads/' + data.url							
							}else{
								_this.back_img_url = store.url + '/uploads/' + data.url							
							}
							
							_this.userInfo.idCardFrontImgUrl = _this.front_img_url
							_this.userInfo.idCardBackImgUrl = _this.back_img_url
							
						}else{
							uni.showModal({
								content: "图片上传失败",
								success: (e) => {									
								},
								fail: () => {
									res(false)
								}
							})
						}
					}
				});
			},
			change(data) {
				this.isActive = true			
				this.txt = data.data.join('')							
			},
			getLocation(location){	
				location = location.replace(/,/g, '')				
				this.userInfo.location = location
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		padding-bottom: 88rpx;
		box-sizing: border-box;
		
		/deep/ .uni-section {
			margin: 5vw;
			background: #FFF;
		}
		
		/deep/ .line {
			background-color: #f13b32;
		}
	}
	
	.uni-uploader__input-box{
		position: absolute;
	}
	
	.uni-uploader__file {
		position: relative;
	}
	.uni-uploader__img{
		z-index: 120
	}
	.uni-uploader-body {
		margin-top: 0;
	}
	
	.uni-uploader {
		width: 50%;
		padding: 20rpx 30rpx;
		background: #FFF;
	}
	
	.close-box {
		position: absolute;
		z-index: 100;
		padding: 20rpx;
		top: -30rpx;
		right: -20rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #f13b32;
	}
	
	.form-box {		
		padding-left: 40rpx;
		box-sizing: border-box;
		background: #FFF;
		margin: 5vw;
		border-radius: 5px;
		> view {
			display: flex;
			border-bottom: 1px solid #e5e5e5;
			box-sizing: border-box;
			font-size: 24rpx;
			
			&:last-of-type {
				border-bottom: none;
			}
			
			view {
				width: 140rpx;
				line-height: 80rpx;
				font-size: 24rpx;
			}
			
			input {
				padding: 20rpx 40rpx 20rpx 0;
				box-sizing: border-box;
				flex: 1;
				height: 80rpx;
				line-height: 40rpx;
			}
			
			/deep/ .placeholder {
			    /* placeholder颜色 */
			    color: #ccc;
			    /* placeholder字体大小 */
			    font-size: 14px;
			}
		}
	}
	
	.img-box {
		display: flex;
		margin: 0 5vw;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #FFF;		
		justify-content: space-between;
	}
	
	.big-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		line-height: 88rpx;
		text-align: center;
		color: #FFF;
		background: #f13b32;
	}
	
	.picker{
		position: relative;
		top: 50%;
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #ccc;
	}
	.picker.active{
		color: #000;
	}
</style>
